設定 viewport 的目的是告訴瀏覽器 viewport 的寬度以什麼為基準，以及這個寬度和 CSS 之間的比例關係。需要在 HTML 的 <head> 裡加入：
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width讓網頁內容與裝置螢幕寬度一致。- 如果寫
width=320px，那麼當螢幕尺寸改變時，viewport 的寬度仍是 320px，這樣網頁內容就會 被縮放。
- 如果寫
initial-scale=1.0設定「CSS 像素」和「裝置像素」的比例為 1:1。- 編輯器的 Emmet 套件來創建 HTML 文件，這行設定會被自動帶入預設內容。
開始使用 meta viewport 標籤設定網站時，由於不同裝置有不同的螢幕解析度和像素密度，在定義頁面元素的時候應習慣使用「相對寬度」 而不是用「絕對寬度」，這樣可確保元素符合 viewport 大小。
![[演講筆記] 突破學習困境與職涯瓶頸的行動指南 - 學習長阿康 : 我的人生策略與學習方法論](https://yuhantaiwan.coderbridge.io/2020/04/05/演講筆記-突破學習困境與職涯瓶頸的行動指南-學習長阿康我的人生策略與學習方法論/?utm_source=coderbridge-io&utm_medium=blog_related_post_img&utm_campaign=gardenia rhapsody_[演講筆記] 突破學習困境與職涯瓶頸的行動指南 - 學習長阿康 : 我的人生策略與學習方法論_@yuhantaiwan_https://static.coderbridge.com/images/covers/default-post-cover-2.jpg)
